import React from 'react'
import { changeNav } from '../../../actions'
import { wxzhctGetList } from '../../../actions/smartDr.js'
import { connect } from 'react-redux'
import { Button, Flex, WhiteSpace, Icon, Accordion, Popup } from 'antd-mobile'
import hhistory from '../../../history'
import CSSModules from 'react-css-modules'
import styles from './alreadyOpenTenant.less'
import { ajaxGet, ajaxPost } from 'wxAjaxUtil'

let productCode = "100009";
let selectDataByPage = {
	"searchParam": "",
	"subProductCode": "",
	"expirationTime": "",
	"page": 1,
	"limit": 10
};
let confItem = [];

@CSSModules(styles, { allowMultiple: true })
class AoTenant extends React.Component {

	constructor(props) {
		super(props);
		this.batchClick = this.batchClick.bind(this);
		this.itemClick = this.itemClick.bind(this);
		this.configClick = this.configClick.bind(this);
	}

	componentDidMount() {
		this.props.tochangeNav({
			title: "智慧餐厅已开通商户", rbtn: [
				<Icon type={'search'} />
			]
		});
		//获取已开通列表
		this.props.wxzhctGetList(selectDataByPage);

		//获取子产品
		ajaxGet('dic/bd/sub_product/list/' + productCode).then((res) => {
			if (res.code == 0) {
				confItem = res.data;
				confItem.unshift({ name: "续费", code: '', alias: 'renew' });
			}
		}, (res) => {
			console.log(res);
		})
	}

	configClick(item) {
		Popup.hide();
		hhistory.push({
			pathname: '/batchConfig',
			state: { alias: item.alias, name: item.name, code: item.code }
		});
	}

	batchClick() {
		Popup.show(<div>
			{
				confItem.map((item, index) => {
					return <div style={{ borderBottom: '1px solid #ccc', height: '.8rem', lineHeight: '.8rem', textAlign: 'center', color: '#fd8900' }} onClick={() => this.configClick(item)}>{index == 0 ? item.name : item.name + '配置'}</div>
				})
			}
		</div>, { animationType: 'slide-up' });
	}

	itemClick(storeCode) {
		// console.log(storeCode);
		hhistory.push({
			pathname: '/subProductInfo/' + storeCode,
			state: { selectData: selectDataByPage }
		})
	}

	render() {
		const { listData } = this.props;
		let detail = (listData && listData.detail) ? listData.detail : [];
		return (
			<div styleName="bodyWrap">
				<WhiteSpace />
				<Flex style={{ background: "#fff", padding: "10px 0" }}>
					<Flex.Item styleName="center"><span styleName="titleText">开通业务</span><Icon type="down" /></Flex.Item>
					<Flex.Item styleName="center"><span styleName="titleText">到期时间</span><Icon type="down" /></Flex.Item>
					<Flex.Item styleName="center red" onClick={this.batchClick}>批量开通</Flex.Item>
				</Flex>
				<WhiteSpace />
				<div>
					{detail.map((item, index) => {
						return (
							<div styleName="listWrap" key={index} onClick={() => this.itemClick(item.storeCode)} >
								<img styleName="listImg" src={item.storeLogo} />
								<div styleName="rightInfo">
									<div>{item.storeName}</div>
									<div styleName="infoBottom">
										<span styleName="infoCode">{item.storeCode}</span><span styleName="infoText">已开通业务：<span styleName="red">{item.subProductInfo.length}</span></span>
									</div>
								</div>
							</div>
						)
					})}
				</div>
			</div>
		)
	}
}

const mapStateToProps = (state) => ({
	listData: state.wxSmartdrs.wxzhctListData
})
const mapDispatchToProps = (dispatch) => ({
	tochangeNav: navogj => dispatch(changeNav(navogj)),
	wxzhctGetList: selectData => dispatch(wxzhctGetList(selectData))
})

export default connect(mapStateToProps, mapDispatchToProps)(AoTenant)